<template>
  <div class="dashboard-container">
    <div>
      <el-row :gutter="10">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" style="background: #fb6d49">
          <div class="content">
            <div class="left">
              <i class="iconfont icon-yonghushezhi" />
            </div>
            <div class="right">
              <p>管理员用户</p>

              <p id="article">
                <CountTo
                  :start-val="0"
                  :end-val="admin_num"
                  :duration="1000"
                /> 名</p>
            </div>

          </div>
        </div></el-col>
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" style="background: #67c23a">
          <div class="content">
            <div class="left">
              <i class="iconfont icon-yonghuguanli_huaban" />
            </div>
            <div class="right">
              <p>平台注册用户</p>
              <p id="article">
                <CountTo
                  :start-val="0"
                  :end-val="user_total"
                  :duration="1000"
                /> 名
              </p>
            </div>

          </div>
        </div></el-col>
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" style="background: #e6a23c">
          <div class="content">
            <div class="left">
              <i class="iconfont icon-tianjiawenzhang" />
            </div>
            <div class="right">
              <p>平台文章总数</p>
              <p id="article">
                <CountTo
                  :start-val="0"
                  :end-val="article_num"
                  :duration="1000"
                />篇

              </p>
            </div>

          </div>
        </div>

        </el-col>
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" style="background: #3a7ce7">
          <div class="content">
            <div class="left">
              <i class="iconfont icon-bianjiwenzhang_huaban" />
            </div>
            <div class="right">
              <p>广告位{{ advpos_num }}个</p>
              <p id="article">
                广告图<CountTo
                  :start-val="0"
                  :end-val="advimg_num"
                  :duration="1000"
                />张</p>
            </div>

          </div>
        </div></el-col>
      </el-row>
    </div>
    <div class="center">
      <el-row :gutter="10">
        <el-col
          :span="8"
        ><div class="grid-content bg-purple">
          <el-container>
            <el-header style="height: 40px">最新注册新用户</el-header>
            <el-footer v-for="item in newUser" :key="item.id" style="height: 40px">
              <el-row type="flex" style="margin-top:0px;font-size:14px">
                <el-col :span="8">{{ item.username }}</el-col>
                <el-col :span="6">{{ item.sex ? '女' : '男' }}</el-col>
                <el-col :span="10">{{ item.address }}</el-col>
              </el-row>
            </el-footer>
          </el-container>
        </div></el-col>
        <el-col
          :span="8"
        ><div class="grid-content bg-purple">
          <el-header style="height: 40px">点赞文章排行</el-header>
          <el-footer v-for="item in hotArticle" :key="item.id" style="height: 40px;font-size:14px">
            {{ item.title }}
          </el-footer>
        </div></el-col>
        <el-col
          :span="8"
        ><div class="grid-content bg-purple">
          <el-header style="height: 40px">用户性别分析</el-header>
          <div ref="baseChartBox" style="background-color:#fff;height:278px;" />
        </div></el-col>
      </el-row>
    </div>
    <div class="buttom">
      <el-row :gutter="10">
        <el-col :span="24"><div ref="barBox" class="grid-content bg-purple" /></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getDetail } from '@/api/dashboard/index'
import { pie, bar } from '@/utils/echarts'
// ! 数字滚动
import CountTo from 'vue-count-to'
export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      // 管理员用户
      admin_num: 0,
      // 平台注册用户
      user_total: 0,
      // 平台文章总数
      article_num: 0,
      // 广告位
      advpos_num: 0,
      // 广告图
      advimg_num: 0,

      // 最新注册用户
      newUser: [],
      // 点赞文章排行
      hotArticle: [],
      // 男生人数
      user_man: 0,
      // 女生人数
      user_woman: 0,
      // 柱状图数据
      barData: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  async created() {
    const res = await getDetail()
    this.admin_num = res.admin_num
    this.user_total = res.user.total
    this.article_num = res.article_num
    this.advpos_num = res.advpos_num
    this.advimg_num = res.advimg_num
    // ! 最新注册用户
    this.newUser = res.new_user
    // ! 点赞文章排行
    this.hotArticle = res.hot_article
    // ! 男生
    this.user_man = res.user.user_man
    // ! 女生
    this.user_woman = res.user.user_woman
    // ! 柱状图数据
    this.barData = res.all_cate
    this.box1()
    this.box2()
  },
  mounted() {
    this.box1()
    this.box2()
  },
  methods: {
    box1() {
      pie(this.user_man, this.user_woman, this.$refs.baseChartBox)
    },
    box2() {
      bar(this.barData, this.$refs.barBox)
    }
  }
}
</script>

<style lang="scss" scoped>

.dashboard {
  &-container {

    margin: 30px;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      height: 90px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .center {
      .el-row {
        margin-top: 30px;
        .el-col {
          .bg-purple {
            height: 322px;
            // background-color: #bfa;
            border: 1px solid #cccccc;
          }
          .el-header {
            background-color: #dddddd;
            color: #000;

            line-height: 40px;
          }
          .el-footer {
            color: #000;
            border-bottom: 1px dashed #cccccc;
            background-color: #fff;
            line-height: 40px;
          }
        }
      }
    }
    .buttom {
      .el-row {
        margin-top: 30px;
        .el-col {
          .bg-purple {
            height: 400px;
            background-color: olivedrab;
            background-color: #fff;
          }
        }
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.content{
  display: flex;
  padding-top: 10px;
  padding-left: 20px;
  color: #fff;
  .left{
    margin-top: 10px;
    margin-right: 15px;
    i{
      font-size: 45px;
    }
  }
  .right{
    font-size: 15px;
    p:first-child{
      margin-bottom: 5px;
    }
    p:last-child{
      margin-top: 5px;
    }
  }
}
</style>
